As promised, we will begin a discussion this month of proper design, layout, and use of web graphics. Graphics have become an integral part of web sites, but most people who write the HTML code for the Internet don't know very much about graphics. Read on, and hopefully others won't be able to say the same of you!
 
Why?
It has always been said that a picture is worth a thousand words. Anyone who has ever read the manual to an application like Microsoft Word or Corel WordPerfect knows this to be a fact. The notorious phrase "this thing reads like stereo instructions" was probably coined by someone reading a picture-less manual. While words may convey a lot of technical data, a picture can provide an overall summary to all the words. More often than not, a summary is all that is needed to convey the necessary data, so a picture is perfect for the purpose.
 
When?
The one problem which crops up for many HTML programmers is deciding when a graphic should be substituted for text. Several concerns should surface when you debate whether or not to use a graphic. First, how long will it take the user to download this graphic? A good web developer must always keep in mind that a majority of the people who are using the Internet today do so with a modem, not a direct network connection. The more graphics you place on a page, the longer it takes to download and display the page. Many sites today create "lite" pages which use few or no graphics, compared to the standard page, to solve this problem. Lite pages are an excellent solution: your standard pages can still show off your coding expertise while the lite pages allow users to access the information on your pages quickly and with less overhead. Yet another approach is to include both a graphical navigation bar and a text-based navigation bar on the same page. One example of this is on the Apple home page:
The Apple Store | Hot News | About Apple | Products | Support
Design & Publishing | Education | Developer | Where to Buy | Home
Job Opportunities at Apple
The text links appear at the bottom of the page, while the graphical navigation bar is directly above. The Apple navigation bar is another instance where a text-based table would work just as well (source code appears at the end of the column:
Graphical:
 
Text:
 
Second, is the graphic truly necessary to the page's clarity? For instance, is it truly important that the links on your page be in the form of graphical buttons, or could they be just as easily displayed as text? Take a look at the following "button" navigation bar:
 
In this case the buttons are very plain, with a slight bevel effect at the edges. This is definitely a case where a graphic is not needed. I took 5 minutes out of my writing to design the same button navigation bar, but using a table and text:
 
Amazing, isn't it? The text-based approach retains the general appearance of the graphical navigation bar, while decreasing the download time (see the end of this article for the HTML code for this table). Concerning adding links to the navigation bar, the graphical approach would force you to learn and use image maps, while the text-based approach allows you to use standard < A HREF></A> HTML links. While there are cases where a graphical approach may work better, it is easy to see that colored text tables will work just as well.
 
What's Next?
Next month we will begin to delve into the different ways to display graphics on your web pages. While you may already know about the <IMG> tag, it is not always the best way to display a graphic. For instance, what if you want to display the text on your pages within a window like this:
 
Of course, the simple way to do this would be to create the entire image above and just add it to the page as:
<IMG SRC="textwindow1.gif" ALIGN="CENTER">
However, that would prove to grow old quickly, since you would then need to design a new graphic for each individual page which displays data in this manner. It would also prove to be disastrous for users, since they would need to repeatedly download large graphics to see your page. Plus, you run into the problem of how to add links to the graphic. Overall, it would become a large headache very quickly.
The better approach is to use only the necessary graphic elements of the display; in this case, the window "border" around the text. You must break the window into blocks of necessary graphics:
 
The red lines indicate how the graphic could be taken apart into individual blocks. What do you do with these blocks? You should notice that the red lines form a very familiar HTML element (at least to those who have been reading this column for the past three months). That's right, it's a table! And next month, we'll delve into how you can use a table to lay out a window border around some text (or graphics, or a table, or any HTML code).
